<template>
  <el-card class="side-card">
    <div class="side-user">
      <el-avatar :size="72" src="/src/assets/images/avatar1.png" />
      <div class="side-name">张老先生</div>
      <div class="side-sub">入住时间：2023-01-15</div>
    </div>
    <el-menu class="side-menu" :default-active="active" @select="go">
      <el-menu-item index="/system/personal-info">
        <el-icon><User /></el-icon>
        <span>个人信息</span>
      </el-menu-item>
      <el-menu-item index="/system/health-records">
        <el-icon><Histogram /></el-icon>
        <span>健康档案</span>
      </el-menu-item>
      <el-menu-item index="/system/medical-medication">
        <el-icon><MedicineBox /></el-icon>
        <span>病历与用药</span>
      </el-menu-item>
      <el-menu-item index="/system/visitor-records">
        <el-icon><ChatLineRound /></el-icon>
        <span>访客记录</span>
      </el-menu-item>
      <el-menu-item index="/system/outing-records">
        <el-icon><Walking /></el-icon>
        <span>外出记录</span>
      </el-menu-item>
      <el-menu-item index="/system/family-relations">
        <el-icon><UserFilled /></el-icon>
        <span>家属关系</span>
      </el-menu-item>
    </el-menu>
  </el-card>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { User, Histogram, ChatLineRound, UserFilled } from '@element-plus/icons-vue'
// 由于没有 MedicineBox/Walking 图标，使用通用替代图标
import { FirstAidKit as MedicineBox, Promotion as Walking } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const active = computed(() => route.path)
const go = (path) => router.push(path)
</script>

<style scoped>
.side-card { padding-bottom: 12px; }
.side-user { text-align: center; padding: 16px 0; }
.side-name { margin-top: 8px; font-size: 16px; font-weight: 700; }
.side-sub { color: #777; font-size: 12px; margin-top: 2px; }
.side-menu { border-top: 1px solid #f0f2f5; margin-top: 8px; }
</style>